<template>
	<view class="recruitment">
		<view class="recruitment_title">
			<uni-easyinput prefixIcon="bars" v-model="value_title" placeholder="输入想要招聘的信息,如:游戏策划">
			</uni-easyinput>
		</view>
		<view class="recruitment_study">
			<uni-card>
				<view class="info">
					<view class="top">
						<text>招聘要求</text>
					</view>
					<view class="bottom">
						<view class="study_check">
							<view class="study_check_top" @click="show=true">
								<text class="xl">学历</text>
								<!-- <uni-icons type="bottom" size="30"></uni-icons> -->
								<u-icon name="arrow-down" color="#8A8A8A" size="15"></u-icon>
							</view>
							<view class="study_check_bottom">
								<text>{{study}}</text>
							</view>
						</view>
						<view class="work_impreance">
							<view class="work_impreance_top" @click="showwork=true">
								<text class="jy">工作经验</text>
								<u-icon name="arrow-down" color="#8A8A8A" size="15"></u-icon>
							</view>
							<view class="work_impreance_bottom">
								<text>{{work}}</text>
							</view>
						</view>
					</view>

					<view class="select_poisition" style="margin-top: 20rpx;">
						<view class="select_left">
							<view class="select_top">
								<text>职业分类</text>
							</view>
							<view class="bottom" style="width: 300rpx;">
								<uni-data-select collection="postitionlist" field="appid as value, name as text"
									@change="checkposition" label="职位选择" v-model="appid" :clear="false" />
							</view>
						</view>
						<view class="select_right">
							<view class="select_right_top">
								<text>基本工资</text>
							</view>
							<view class="select_right_bottom">
								<u--input prefixIcon="rmb" placeholder="基本工资" border="surround" type="number"
									v-model="value_money" maxlength="6" fontSize="10"></u--input>
							</view>
						</view>
					</view>

					<view class="work_info">
						<view class="left">
							<view class="left_top">
								<text>职位详情</text>
							</view>
							<view class="left_bottom">
								<view class="left_bottom_top">
									<view class="top_top" @click="addinfo">
										<u-icon name="plus" size="12px"></u-icon>
										<text>添加</text>
									</view>
									<view class="bottom_bottom">
										<input
											style="background-color: #eee;font-size: 30rpx;font-family: '楷体';	border-radius: 10rpx;padding: 5rpx;"
											placeholder="输入" type="text" maxlength="8" v-model="workInfo">
									</view>
								</view>
								<view class="worklist">
									<tag-item :text="item" v-for="(item,index) in text" :key="index"
										@Clsoe="canceltag"></tag-item>
								</view>
							</view>
						</view>

					</view>
				</view>
			</uni-card>
		</view>
		<view class="rach_text">
			<uni-card>
				<view class="worktitle">
					<text>工作内容、要求</text>
				</view>
				<view class="rach_text_body" style="border: 1px #eee solid;">
					<editor @statuschange="onstatuschange" @ready="onEditReady" class="myEdit"
						placeholder="如:1.工作细致,责任心强"></editor>
				</view>
				<view class="icons">
					<view class="item" :class="headShow ? 'active':''" @click="clickHead">
						<text class="iconfont icon-zitibiaoti"> </text>
					</view>
					<view class="item" :class="boldShow ? 'active':''" @click="clickBold">
						<text class="iconfont icon-zitijiacu"> </text>
					</view>
					<view class="item" :class="ItalicShow ? 'active':''" @click="clickItalic">
						<text class="iconfont icon-zitixieti"> </text>
					</view>
					<view class="item" :class="istDivider ? 'active':''" @click="insertDivider">
						<text class="iconfont icon-fengexian"> </text>
					</view>
					<view class="item" @click="editOk">
						<uni-icons type="color" :color="isok ? 'skyblue':''" size="30"></uni-icons>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="other_info">
			<uni-card>
				<view class="other_top">
					<text>其他信息</text>
				</view>
				<view class="other_bottom">
					<view class="other_test">
						<view class="other_bottom_left">
							<view class="top">
								<text>招聘者身份</text>
							</view>
							<view class="left_input">
								<input v-model="idcard" style="background-color: #eee;width: 150rpx;" type="text"
									maxlength="5">
							</view>
						</view>
					</view>
					<view class="other_people">
						<view class="people">
							<view class="top">
								<text>计划人数</text>
							</view>

							<view class="left_input">
								<input v-model="peponum" type="number" maxlength="3"
									style="background-color:#eee;width:200rpx">
							</view>
						</view>
						<view class="people">
							<view class="top">
								<text>公司/单位注册号</text>
							</view>

							<view class="left_input">
								<input v-model="companyid" type="number" maxlength="6"
									style="background-color:#eee;width:200rpx">
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="submit">
			<u-button text="立即发布" @click="upinfo" color="#008080"></u-button>
		</view>
		<view class="other_picker">
			<u-picker @confirm="checkstudy" @cancel="cancelstudy" :closeOnClickOverlay="true" @close="cancelstudy"
				:show="show" keyName="text" :columns="columns"></u-picker>
			<u-picker @confirm="checkwork" @cancel="cancelwork" :closeOnClickOverlay="true" @close="cancelwork"
				:show="showwork" keyName="text" :columns="worklist"></u-picker>
		</view>
	</view>
</template>

<script>
	// province
	
	const db = uniCloud.database()
	export default {
		data() {
			return {
				appid: 0,
				study: '不限',
				stuyid: 6,
				checkworkid: 6,
				poisitions: 0,
				work: '不限',
				studyinfo: '学历',
				show: false,
				value_title: '',
				value_money: 0,
				worklist: [
					[{
							text: '在校生',
							id: 0
						},

						{
							text: '应届生',
							id: 1
						},
						{
							text: '1年内',
							id: 2
						},
						{
							text: '1-3年内',
							id: 3
						},
						{
							text: '3-5年内',
							id: 4
						},
						{
							text: '5年以上',
							id: 5
						},
						{
							text: '不限',
							id: 6
						}

					]
				],
				columns: [
					[{
							text: '高中',
							id: 0
						},
						{
							text: '中专',
							id: 1
						},
						{
							text: '大专',
							id: 2
						},
						{
							text: '本科',
							id: 3
						},
						{
							text: '硕士',
							id: 4
						},
						{
							text: '博士',
							id: 5
						},
						{
							text: '不限',
							id: 6
						}
					]
				],

				showwork: false,
				work_info: [],
				showtag: true,
				text: [],
				workInfo: "",
				//编辑标题
				headShow: false,
				//字体加粗
				boldShow: false,
				//字体倾斜
				ItalicShow: false,
				//下划线
				istDivider: false,
				//关闭
				isok: false,
				//招聘者身份
				idcard: '',
				//公司
				compon: '',
				//r人数
				peponum: '',
				richinfo: '',
				user_id: '',
				//公司注册号
				companyid: '',
				istop:false
			};
		},
		 onLoad() {
			this.user_id = uniCloud.getCurrentUserInfo().uid
			console.log(this.user_id)
		
		},
		methods: {
			async getcompanyid() {
				uni.showLoading({
					mask:true
				})
			return	await db.collection("argee").where({
					company_id: this.companyid
				}).get()
			},
			//editOk颜色
			editOk() {

				this.isok = !this.isok
				this.editorCtx.format('color', this.isok ? 'red' : '')
				this.headShow = false
				//字体倾斜
				//下划线
				this.istDivider = false
				//关闭
				this.ItalicShow = false
				this.boldShow = false
			},
			//字体倾斜
			clickItalic() {
				this.ItalicShow = !this.ItalicShow
				this.editorCtx.format("italic")
				this.headShow = false
				//字体倾斜
				//下划线
				this.istDivider = false
				//关闭
				this.isok = false
				this.boldShow = false
			},
			//字体加粗
			clickBold() {
				this.boldShow = !this.boldShow
				this.editorCtx.format("bold")
				this.headShow = false
				//字体倾斜
				this.ItalicShow = false,
					//下划线
					this.istDivider = false,
					//关闭
					this.isok = false
			},
			//标题
			clickHead() {
				this.headShow = !this.headShow
				this.editorCtx.format("header", this.headShow ? 'H2' : false)
				this.boldShow = false,
					//字体倾斜
					this.ItalicShow = false,
					//下划线
					this.istDivider = false,
					//关闭
					this.isok = false
			},
			//初始化
			onEditReady() {
				// uni.createSelectorQuery().in(this).select('#editor').context((res) => {
				// 	this.editorCtx = res.context
				// }).exec()
				uni.createSelectorQuery().in(this).select('.myEdit').fields({
					size: true,
					context: true
				}, res => {
					console.log(res)
					this.editorCtx = res.context
				}).exec()
			},
			//插入分割线
			insertDivider() {
				this.istDivider = !this.istDivider
				this.editorCtx.insertDivider()
				this.boldShow = false,
					//字体倾斜
					this.headShow = false
				//下划线
				this.ItalicShow = false,
					//关闭
					this.isok = false
			},

			cancelstudy() {
				this.show = false
			},
			cancelwork() {
				this.showwork = false
			},
			canceltag(e) {
				console.log(e)
				let index = this.text.indexOf(e)
				this.text.splice(index, 1)
			},
			//确认选择的值
			checkstudy(e) {
				console.log(e)
				this.study = e.value[0].text
				this.stuyid = e.value[0].id
				this.show = false
			},
			checkwork(e) {
				console.log(e)
				this.work = e.value[0].text
				this.checkworkid = e.value[0].id
				this.showwork = false
			},
			checkposition(e) {
				console.log(e)
				this.poisitions = e
			},
			//添加只为详情
			addinfo() {
				if (this.workInfo.trim() == "") {
					uni.showToast({
						title: "内容不能为空",
						icon: 'none'
					})
					return;
				}

				if (this.text.length >= 12) {
					uni.showToast({
						title: '最多十二个',
						icon: 'none'
					})
					return;
				}
				this.text.push(this.workInfo)
				this.workInfo = ''
			},
			//样式发生改变
			onstatuschange(e) {
				console.log(e)
				let detail = e.detail
				this.checkStatus("header", detail, "headShow")
				this.checkStatus("bold", detail, "boldShow")
				this.checkStatus("italic", detail, "ItalicShow")
				this.checkStatus("color", detail, "isok")
			},
			checkStatus(name, detail, obj) {
				if (detail.hasOwnProperty(name)) {
					this[obj] = true
				} else {
					this[obj] = false
				}
			},

			async upinfo() {
				let temp=false
				if(this.value_title.trim()==""){
					uni.showToast({
						title:"未填写招聘信息",
						icon:"none"
					})
					return;
				}
				
				if (this.value_money[0] == '0') {
					uni.showToast({
						title: '工资不能以0开头',
						icon: 'none'
					})
					return;
				}
				if (Number(this.value_money) < 500) {
					uni.showToast({
						title: "工资至少500",
						icon: 'none',
					})
					return;
				}
				if (this.companyid.trim() == "") {
					uni.showToast({
						title: "请填写公司/单位注册号",
						icon: 'none'
					})
					return;
				}
				
				this.editorCtx.getContents({
					success: res => {
						this.richinfo = res.html
						if(this.richinfo.trim()==""){
							uni.showToast({
								title:"未填写工作内容",
								icon:"none"
							})
							return;
						}
						
						
						let tempojb = {
							criticism_title: this.value_title,
							work_info: this.richinfo,
							study: this.stuyid,
							work_impreance: this.checkworkid,
							industry: this.poisitions,
							money: Number(this.value_money),
							position_desc: this.text,
							user_work: this.idcard,
							company_nums: Number(this.peponum),
							company_id: this.companyid,
							}
							uni.showLoading({
								
							})
							this.getcompanyid().then(async res => {
							if (res.result.data.length == 0) {
								uni.showToast({
									title: "公司不存在或未认证",
									icon: 'none'
								})
								uni.hideLoading()
								return;
								
								
							}else{
								await db.collection("recruitment").add({
										...tempojb
									}).then(res => {
										uni.hideLoading()
										console.log(res, '陈功')
										uni.showToast({
											title:"发布成功"
										})
										uni.navigateTo({
											url:"/pages-other/job/job"
										})
									})
							}
						
						})
						
						
					}
				})
			
				
				
				
			
			
				}
			
			

		}
	}
</script>

<style lang="scss">
	.recruitment {
		.recruitment_title {
			margin: 20rpx 0;
		}

		.recruitment_study {
			margin-top: 10rpx;

			.info {

				height: 55vh;

				.top {
					display: flex;
					justify-content: center;

					text {
						font-size: 30rpx;
						font-weight: 800;
						font-family: '楷体';
						color: #000;
					}
				}


				.bottom {
					display: flex;
					justify-content: space-around;

					.study_check {
						display: flex;
						flex-direction: column;
						align-items: center;

						.study_check_top {
							display: flex;

							.xl {
								font-size: 30rpx;
								font-family: '楷体';
								font-weight: 800;
								margin-right: 10rpx;
							}

						}

						.study_check_bottom {
							font-size: 25rpx;

							padding: 10rpx;
							font-family: 'YouYuan';
						}
					}

					.work_impreance {
						display: flex;
						flex-direction: column;
						align-items: center;

						.work_impreance_top {
							display: flex;

							.jy {
								font-size: 30rpx;
								font-family: '楷体';
								font-weight: 800;
								margin-right: 10rpx;
							}
						}

						.work_impreance_bottom {

							font-size: 25rpx;
							font-family: 'YouYuan';
							padding: 10rpx;

						}
					}
				}
			}

			.select_poisition {
				display: flex;

				.select_left {
					display: flex;
					flex-direction: column;
					align-items: center;

					.select_top {
						font-size: 30rpx;
						font-family: '楷体';
						font-weight: 800;
						margin-right: 10rpx;
					}

					flex: 1;
				}

				.select_right {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;

					.select_right_top {
						font-size: 30rpx;
						font-family: '楷体';
						font-weight: 800;
						margin-right: 10rpx;
					}


					.select_right_bottom {
						width: 200rpx;
						height: 40rpx;

					}
				}
			}

			.work_info {
				margin-top: 50rpx;

				.left {
					.left_top {
						text {
							font-size: 30rpx;
							font-family: '楷体';
							font-weight: 800;
							margin-right: 10rpx;
						}

					}

					.left_bottom {
						.left_bottom_top {
							display: flex;
							align-items: center;

							.top_top {
								margin: 10rpx 10rpx;
								width: 120rpx;
								background-color: #f3e2a9;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 20rpx;

								text {
									font-size: 25rpx;
								}
							}

							.bottom_bottom {
								width: 300rpx;

							}
						}

						.worklist {
							display: flex;
							flex-wrap: wrap;

						}
					}
				}
			}
		}



		.rach_text {
			.worktitle {
				display: flex;
				justify-content: center;

				text {
					font-size: 30rpx;
					font-weight: 800;
					font-family: '楷体';
					color: #000;
				}
			}

			.icons {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-around;

				.item {
					margin-right: 10rpx;

					&.active {
						color: skyblue;
					}
				}
			}
		}

		.other_info {

			.other_top {
				display: flex;
				justify-content: center;

				text {
					font-size: 30rpx;
					font-weight: 800;
					font-family: '楷体';
					color: #000;
				}
			}

			.other_bottom {
				display: flex;
				flex-direction: column;

				.other_test {
					display: flex;

					.other_bottom_left {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.top {
							display: flex;
							justify-content: center;

							text {
								font-size: 30rpx;
								font-family: '楷体';
								font-weight: 800;
								margin-right: 10rpx;
							}
						}
					}

					.other_bottom_right {
						flex: 1;
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.top {
							display: flex;
							justify-content: center;

							text {
								font-size: 30rpx;
								font-family: '楷体';
								font-weight: 800;
								margin-right: 10rpx;
							}
						}
					}
				}

				.other_people {
					display: flex;
					justify-content: space-around;

					.people {
						margin-top: 10rpx;

						.top {
							display: flex;
							justify-content: center;
							align-items: center;

							text {
								font-size: 30rpx;
								font-family: '楷体';
								font-weight: 800;
								margin-right: 10rpx;
							}
						}

						.left_input {
							display: flex;
							justify-content: center;
						}
					}
				}

			}
		}

	}
</style>
<style>
	page {
		background-color: #76D7C4;
	}
</style>